{% import _self as self %}
<div class="content">
	<h1>Customize Website Theme</h1>
	<div>
        Instructors can upload simple html files to use as a wrapper around the Submitty website.<br>
        They can be placed in any of the locations shown in the below diagram.<br>
        Note that they are loaded in frames and will not be able to run scripts or affect the rest of Submitty.<br>
        <br>
        You can also upload a CSS file to override the default styles from Submitty.<br>
        <a target=_blank href="http://submitty.org/instructor/website_customization">More information about Website Customization <i style="font-style:normal;" class="fa-question-circle"></i></a>
    </div>
    <br>
    <div>
        Here is how the site will be laid out:
        <div class="wrapper-example">
            <div class="wrapper-top">Top Bar</div>
            <div class="wrapper-center">
                <div class="wrapper-left">Left<br>Sidebar</div>
                <div class="wrapper-body">Submitty</div>
                <div class="wrapper-right">Right<br>Sidebar</div>
            </div>
            <div class="wrapper-bottom">Bottom Bar</div>
        </div>
    </div>
    <br>
    {# This is a data table #}
    <table class="wrapper-upload">
        <tr class="wrapper_layout_header">
            <td class="layout_th_cell">Panel</td>
            <td class="layout_th_cell">File Type</td>
            <td class="layout_th_cell">Upload</td>
            <td class="layout_th_cell">Current File</td>
        </tr>
        {{ self.table_file(wrapper_files, "top_bar.html", "Top Bar", "HTML", "wrapper-top", "top_bar", csrf_token, upload_url, delete_url) }}
        {{ self.table_file(wrapper_files, "left_sidebar.html", "Left Sidebar", "HTML", "wrapper-left", "left_sidebar", csrf_token, upload_url, delete_url) }}
        {{ self.table_file(wrapper_files, "right_sidebar.html", "Right Sidebar", "HTML", "wrapper-right", "right_sidebar", csrf_token, upload_url, delete_url) }}
        {{ self.table_file(wrapper_files, "bottom_bar.html", "Bottom Bar", "HTML", "wrapper-bottom", "bottom_bar", csrf_token, upload_url, delete_url) }}
        {{ self.table_file(wrapper_files, "override.css", "Custom Style", "CSS", "wrapper-css", "custom_style", csrf_token, upload_url, delete_url) }}
        {{ self.table_file(wrapper_files, "sidebar.json", "Sidebar Links", "JSON", "wrapper-css", "sidebar_links", csrf_token, upload_url, delete_url) }}
    </table>
</div>

{% macro table_file(wrapper_files, file, name, type, class, aria_labelledby_id, csrf_token, upload_url, delete_url) %}
    <tr class="{{ class }}">
        <td id="name_{{ aria_labelledby_id }}">{{ name }}</td>
        <td id="type_{{ aria_labelledby_id }}">{{ type }}</td>
        <td>
            <form action="{{ upload_url }}" method="POST" enctype="multipart/form-data">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
                <input type="hidden" name="location" value="{{ file }}">
                <input type="file" name="wrapper_upload" aria-labelledby="name_{{ aria_labelledby_id }} type_{{ aria_labelledby_id }}">
                <input type="submit" class="btn btn-default" value="Upload" />
            </form>
        </td>
        <td>
            {% if wrapper_files[file] != null %}
                <form action="{{ delete_url }}" method="post">
                    <input type="hidden" name="location" value="{{ file }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <input type="submit" class="btn btn-danger" value="Delete">&nbsp;
                    {{ wrapper_files[file] }}
                </form>
            {% endif %}
        </td>
    </tr>
{% endmacro %}
